<template>
    <div class='chooseus-bg'>
        <div class="chooseus-inner w">
            <div class='chooseus-header'>
                <div class="chooseus-header-cn">为什么选择我们</div>
                <div class="chooseus-header-eg">WHY CHOOSE US</div>
            </div>
            <div class="chooseus-describe">
                {{describe}}
            </div>
            <div class="chooseus-list">
                <dl v-for="msg in messages" :key="msg.id">
                    <dt>
                        <div class="chooseus-list-icon" :style="{backgroundImage:`url(${msg.img_url})`, backgroundRepeat:'no-repeat'}"></div>
                        <div class="chooseus-list-title">{{msg.title}}</div>
                    </dt>
                    <dd class="chooseus-list-context">{{msg.context}}</dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            describe:
                "不忘初心，方得始终，用真诚的心对待您，用优质的成果回馈您，越努力，越幸运！越沟通，越亲近！",
            // 测试数组
            messages: [
                {
                    id: 1,
                    img_url: require("@/assets/img/infor-icon.png"),
                    title: "追求高品质",
                    context:
                        "从创始至今，我们的业务方向始终不变，专注做好一件事才能更好的追求高品质，这也是我们存在的价值。在未来我们也是基于此信念而继续为客户创造价值！"
                },
                {
                    id: 2,
                    img_url: require("@/assets/img/infor-icon.png"),
                    title: "流程严谨化",
                    context:
                        "在不断的创新和实践中总结出可持续和可信赖的服务流程，坚持与用户一起思考，用设计的方法发现问题、解决问题、输出设计方案，并实现客户产品和企业价值的提升。"
                },
                {
                    id: 3,
                    img_url: require("@/assets/img/infor-icon.png"),
                    title: "探索与总结",
                    context:
                        "多年来积累了一定数量优秀的项目案例，并验证了商业的价值。在不断的探索中总结经验，以结果为导向，继续为更多客户提供优秀的作品。"
                },
                {
                    id: 4,
                    img_url: require("@/assets/img/infor-icon.png"),
                    title: "此处是文案",
                    context:
                        "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦"
                }
            ]
        };
    }
};
</script>

<style lang='css' scoped>
.chooseus-bg {
    height: 750px;
    background: -webkit-linear-gradient(150deg, #2b5876, #4e4376);
    background: -moz-linear-gradient(150deg, #2b5876, #4e4376);
    background: linear-gradient(150deg, #2b5876, #4e4376);
}
.chooseus-bg .chooseus-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
}
.chooseus-header {
    position: relative;
    margin-top: 70px;
    padding-bottom: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
}
.chooseus-header .chooseus-header-cn {
    position: absolute;
    top: 24px;
    font-size: 2rem;
    color: #f5f7fa;
}
.chooseus-header .chooseus-header-eg {
    line-height: 52px;
    font-weight: bold;
    font-family: "SourceHanSansCN";
    font-size: 3.125rem;
    color: #274c71;
}
.chooseus-inner .chooseus-describe {
    padding-bottom: 80px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 1.125rem;
    color: #8f9eb6;
}
.chooseus-inner .chooseus-list {
    display: flex;
    justify-content: space-between;
    height: 320px;
    width: 100%;
}
.chooseus-inner .chooseus-list dl {
    float: left;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
    padding: 40px 40px 0px;
    width: 270px;
    height: 100%;
    background-color: #232B2D;
    text-align: left;
}
.chooseus-list dl dt {
    width: 100%;
    height: 40px;
    display: flex;
}
.chooseus-list dt .chooseus-list-icon {
    margin-right: 20px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
}
dl:nth-child(1) .chooseus-list-icon {
    background-position-x: center;
    background-position-y: 12px;
}
dl:nth-child(2) .chooseus-list-icon {
    background-position-x: center;
    background-position-y: -24px;
}
dl:nth-child(3) .chooseus-list-icon {
    background-position-x: center;
    background-position-y: -60px;
}
dl:nth-child(4) .chooseus-list-icon {
    background-position-x: center;
    background-position-y: -90px;
}
.chooseus-list-title {
    padding-top:6px; 
    font-size: 1.25rem;
    color: #f5f7fa;
}
.chooseus-list-context {
    padding-top: 30px;
    line-height: 24px;
    font-size: 0.875rem;
    color: #8C9193;
}
</style>